<template>
  <Layout class="layout">
      <Sider hide-trigger :style="{background: '#dddee4', height: 'calc(100vh - 64px)'}">
          <Menu ref="modularMenu"  width="auto" accordion=accordion :active-name="activeMenu" :open-names="open" @on-select="routeTo" :style="{height: 'calc(100vh - 60px)', overflowY: 'auto', background: '#dddee4'}">
              <Submenu name="center">
                  <template slot="title">
                      <Icon type="md-albums" />
                      反馈中心
                  </template>
                  <MenuItem  style="background-color: #cacad1"  :key="j" v-for="(i,j) in menudata" :name="i.menuUrl" >
                      {{i.menuName}}
                  </MenuItem>
              </Submenu>
          </Menu>
      </Sider>
      <Content :style="{padding: '0',  background: '#f3f4f8', height: 'calc(100vh - 64px)'}">
          <router-view  @refreshTodo="refreshTodo"></router-view>
      </Content>
  </Layout>
</template>

<script>
  import {sessionStorage} from "../../../common/cacheUtils";

  export default {
      name: "modular",
      data(){
          return{
              height: 0,
              menudata: [{
                  menuUrl:'/problemFeedbackList2',
                  menuName:'问题反馈'
              }],
              activeMenu : '' ,
              open : []
          }
      },
      watch: {
          selectMenu(){
              this.$refs.modularMenu.$children.forEach((item)=>{
                  item.opened = false;
              });
          }
      },
      mounted:function(){
              this.$router.push('/problemFeedbackList2');
              this.open = ["center"];
              this.activeMenu = "/problemFeedbackList2";
              this.$nextTick(() => {
                  this.$refs.modularMenu.updateOpened()
                  this.$refs.modularMenu.updateActiveName()
              })
      },
      methods: {
          routeTo(e){
              this.$router.push(e);
          },
          refreshTodo(){
              this.$emit("refreshTodo");
          }
      }
  }
</script>

<style scoped>
     .layout{
      width: 100vm;
  }

  .rotate-icon{
      transform: rotate(-90deg);
  }
  .change-icon{
      padding-left: 130px;
  }
  .layout-logo-left{
      width: 90%;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      margin: 15px auto;
  }
  .menu-icon{
      transition: all .3s;
  }
  .rotate-icon{
      transform: rotate(-90deg);
  }
  .menu-item span{
      display: inline-block;
      overflow: hidden;
      width: 69px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      transition: width .2s ease .2s;
  }
  .menu-item i{
      transform: translateX(0px);
      transition: font-size .2s ease, transform .2s ease;
      vertical-align: middle;
      font-size: 16px;
  }
  .collapsed-menu span{
      width: 0px;
      transition: width .2s ease;
  }
  .collapsed-menu i{
      transform: translateX(5px);
      transition: font-size .2s ease .2s, transform .2s ease .2s;
      vertical-align: middle;
      font-size: 22px;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover {
      color: #000000;
      background: #cacad1!important;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
      border-right: none;
      color: #fff;
      background: #E53935!important;
  }

  .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title {
      color: #757575;
  }
 .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title:hover {
      color: #000000;
      background: #dddee4;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened >>>.ivu-menu-submenu-title {
      color: #757575;
      background: #dddee4;
  }
  .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover{
      color: #333333;
      background: #fff;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover{
      background: rgb(221, 222, 228);
  }
</style>
